/**
 * 
 * @class app.widgets.ProjectTree
 * @extends Ext.Panel
 */

Ext.ns('app.widgets');

app.widgets.ProjectTree = Ext.extend(Ext.tree.TreePanel,{

	collapsible : true
	, title : 'Navigation'
	, width : 200
	, autoScroll : true
	, split : true
	, useArrows : true

	, initComponent : function() {
		var config = this.createConfig(this.initialConfig);

		Ext.apply(this, config);
		Ext.apply(this.initialConfig, config);

		app.widgets.ProjectTree.superclass.initComponent.apply(this,arguments);

		this.initListeners();  
	}

	/*
	 * Event Handlers: 
	 */

	, onBeforeExpand : function(){
		this.getRootNode().expand();
	} 
	
	, onContextMenu : function(node, e){
        
		if(!this.menu){ // create context menu on first right click
            this.menu = new Ext.menu.Menu({
                items: [app.Actions.createTask(), app.Actions.createProject()]
            });
            this.menu.on('hide', this.onContextHide, this);
        }
		node.select();
		this.menu.show(node.ui.getAnchor());
    }

    , onContextHide : function(){
        if(this.ctxNode){
            this.ctxNode.ui.removeClass('x-node-ctx');
            this.ctxNode = null;
        }
    }

	/*
	 * Utils: 
	 */

	, initListeners : function(){
		this.on('beforeexpand', this.onBeforeExpand, this);
		this.on('contextmenu', this.onContextMenu); 
	}
	
	, createConfig : function(config) {
		
		var loader = new Ext.tree.TreeLoader({
			directFn : ProjectTree.getTree
			, nodeParameter : 'id'
			, paramOrder : ['id', 'type']
		});
		
		loader.on('beforeload', function(treeLoader, node) {
			treeLoader.baseParams.type = node.attributes.type;
		}); 

		var root = new Ext.tree.AsyncTreeNode({
			id : 'projecttree-root', 
			expanded : true
		});

		var config = {
			rootVisible : false
			, loader : loader			
			, root : root
			, enableDD : true
		};

		return config;
	}
	
	
	
});

Ext.reg('projecttree', app.widgets.ProjectTree);
